<template>
  <r-pop
    title="编写求职状态"
    width="500px"
    height="150px"
    @confirm="onSave"
    v-bind="$attrs"
  >
    <div class="edit__base">
      <div class="edit__base__item" :key="item.id" v-for="item in baseItems">
        <span>{{ item.name }}</span>
        <input
          class="input-line"
          :placeholder="item.placeholder"
          v-model="item.value"
        />
      </div>
    </div>
  </r-pop>
</template>

<script>
import cloneDeep from "lodash/cloneDeep";
import RPop from "@/components/base/RPop";
import { ref } from "vue";

export default {
  name: "edit",
  components: { RPop },
  props: {
    originData: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, ctx) {
    const baseItems = ref(cloneDeep(props.originData));
    const onSave = () => ctx.emit("save", baseItems.value);
    return {
      baseItems,
      onSave,
    };
  },
};
</script>

<style scoped lang="less">
.edit {
  &__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    &__item {
      width: 220px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &:nth-child(n + 2) {
        margin-bottom: 5px;
      }
    }
  }
}
</style>
